.bluemap-container .ui .ui-element.dropdown {
    padding: 0;
    cursor: pointer;

    overflow: visible;

    user-select: none;

    > .header {
        height: 100%;
        padding-right: 1rem;

        &:hover {
            background-color: $hover_bg;
            color: $hover_fg;

            &::after {
                border-color: $hover_fg transparent transparent transparent;
            }
        }

        > .ui-element {
            pointer-events: none;
            background-color: transparent;
        }

        &::after {
            position: absolute;
            top: calc(50% - 0.2rem);
            right: 0.5rem;

            content: "";

            width: 0;
            height: 0;

            border: solid;
            border-width: 0.4rem 0.25rem 0.4rem 0.25rem;
            border-color: $normal_fg transparent transparent transparent;
        }
    }

    &.open > .header {
        background-color: $hover_bg;
        color: $hover_fg;

        &::after {
            top: calc(50% - 0.6rem);
            border-color: transparent transparent $hover_fg transparent;
        }
    }

    > .select {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;
        overflow-x: hidden;

        max-height: 10rem;
        overflow-y: auto;

        z-index: 110;

        > .option {
            background-color: $normal_bg;
            color: $normal_fg;

            &:hover {
                background-color: $hover_bg;
                color: $hover_fg;
            }

            &.selected {
                background-color: $active_bg;
                color: $active_fg;
            }
        }
    }

    .option {
        padding: 0 0.5rem;
    }

}